<template>
    <div>
        <el-dialog v-model="dialogFlag" :title="tit" width="756" :close-on-modal="false">
            <el-form ref="formRef" :model="listObj" :inline="true" :rules="rules" class="demo-form-inline">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号码" label-width="80" prop="phone">
                            <el-input v-model="listObj.phone" placeholder="请输入手机号码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户姓名" label-width="80" prop="name">
                            <el-input v-model="listObj.name" placeholder="请输入客户姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="渠道来源" label-width="80">
                            <el-select v-model="listObj.channelId" placeholder="渠道来源" >
                                <el-option v-for="(item, index) in channelList" :key="item.channelId" :value="item.channelId" :label="item.channelName" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="活动信息" label-width="80">
                            <el-select v-model="listObj.activityId" placeholder="活动信息">
                                <el-option v-for="(item, index) in activityList" :key="item.activityId" :value="item.activityId" :label="item.name" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户性别" label-width="80">
                            <el-radio-group v-model="listObj.gender">
                                <el-radio :value="0">男</el-radio>
                                <el-radio :value="1">女</el-radio>
                                <el-radio :value="2">未知</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户年龄" label-width="80">
                            <el-input-number v-model="listObj.age" :min="6" placeholder="年龄"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="微信号" label-width="80">
                            <el-input v-model="listObj.weixin" placeholder="请输入微信号码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="QQ号码" label-width="80">
                            <el-input v-model="listObj.qq" placeholder="请输入QQ号码" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="submit">确认</el-button>
                    <el-button @click="dialogFlag = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { watch, computed } from 'vue';
import { ref } from 'vue';

// 接收父组件数据
const props = defineProps(['channelList', 'activityList'])

// 接收弹窗开关
const dialogFlag = defineModel('dialogFlag')

// 数据
const obj = {
    activityId: '',
    age: null,
    channelId: '',
    gender: '',
    name: '',
    phone: '',
    qq: '',
    weixin: ''
}

const listObj = ref({ ...obj })
// 校验
const rules = ref({
    phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入客户姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '姓名长度2-10位', trigger: 'blur' }
    ]
})

// 新增 or 修改
const titFlag = defineModel('titFlag')
const tit = computed(() => {
    return titFlag.value === 'add' ? '增加线索' : '修改线索'
})

// 提交
const emit = defineEmits(['dialogList', 'activityList'])
const formRef = ref(null)
const submit = async () => {
    try {
        await formRef.value.validate()
        dialogFlag.value = false
        emit('dialogList', listObj)
    } catch (err) { }
}

// 监听弹窗，进行清空
watch(dialogFlag, (newVal) => {
    if(!newVal) {
        formRef.value.resetFields()
        listObj.value = { ...obj }
    }
})

defineExpose({
    listObj
})

</script>

<style lang="scss" scoped>
.demo-form-inline {

    .el-input {
        --el-input-width: 250px;
    }

    .el-select {
        --el-select-width: 240px;
    }
}
</style>